<template>
  <div class="slide-wrapper"
       ref="slide">
    <div class="slide-content">
      <div class="slide-page"
           v-for="(data,index) in resources"
           :key="index">
        <img :src="data.pic" />
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
BScroll.use(Slide)
export default {
  props: {
    resources: {
      type: Array,
      required: true
    },
    currentPageIndex: {
      type: Number,
      required: false,
      default: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init () {
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true,
        scrollY: false,
        slide: true,
        momentum: false,
        bounce: false,
        probeType: 3,
        autoplay: false
      })
      this.slide.on('scrollEnd', this._onScrollEnd)
      this.slide.on('slideWillChange', this._onSlideWillChange)
      // v2.1.0
      this.slide.on('slidePageChanged', this._onSlidePageChanged)
    },
    _onScrollEnd (val) {
      this.$emit('scrollEnd', val)
    },
    _onSlideWillChange (val) {
      this.$emit('slideWillChange', val)
    },
    _onSlidePageChanged (val) {
      this.$emit('slidePageChanged', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.slide-wrapper {
  overflow: hidden;
  height: 165px;
  .slide-content {
    position: relative;
    overflow: hidden;
    .slide-page {
      width: 100%;
      display: inline-block;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
